<template>
  <div class="gc-flex gc-flex-col wraper">
    <Header></Header>
    <Search :cities="cities"></Search>
    <list :cities="cities" :letter="letter"></list>
    <Alphabet :cities="cities" @change="handleLetterChange"></Alphabet>
  </div>
</template>

<script type="es6">
import Header from './components/header'
import list from './components/list'
import Alphabet from './components/Alphabet'
import Search from './components/search'
import axios from 'axios'
export default {
  name: 'City',
  components: {
    Header,
    list,
    Alphabet,
    Search
  },
  data () {
    return {
      cities: {},
      letter: ''
    }
  },
  methods: {
    getAreaInfo () {
      axios.get('/api/city.json').then(this.getAreaInfoSucc)
    },
    getAreaInfoSucc (res) {
      this.cities = res.data.data.cities
    },
    handleLetterChange (letter) {
      this.letter = letter
    }
  },
  mounted () {
    this.getAreaInfo()
  }
}
</script>

<style scoped lang="less">
.wraper{
  height: 100vh;
}
</style>
